
<template>
  <div class="app-container-bottom-container"
       :style="{'width':(isCollapse?'calc(100% - 54px)':'calc(100% - 200px)')}">
    <el-button type="primary" icon="el-icon-check" @click="submitForm">确 定</el-button>
    <el-button @click="cancel" icon="el-icon-close" style="margin-left:20px;">取 消</el-button>
  </div>
</template>

<script>
  import { mapGetters } from "vuex";

  export default {
    name: "BottomBar",
    props: {
      // 按钮文案
      text: {
        require: false,
        type: Object,
        default: () => {
          return {
            cancel: "取消",
            confirm: "保存",
          };
        },
      },
      // 底部区域的默认高度
      defaultHeight: {
        require: false,
        type: Number,
        default: 52,
      },
      // 确定按钮展示
      showConfirm: {
        require: false,
        type: Boolean,
        default: true,
      },
      // 取消按钮展示
      showCancel: {
        require: false,
        type: Boolean,
        default: true,
      },
      // 确定按钮disabled
      confirmDisabled: {
        require: false,
        type: Boolean,
        default: false,
      },
      // 取消按钮disabled
      cancelDisabled: {
        require: false,
        type: Boolean,
        default: false,
      },
      // laodding
      loading: {
        require: false,
        type: Boolean,
        default: false,
      },
      // 保存按钮事件(必传)
      handleConfirm: {
        require: true,
        // type: [Function, Object],
        default: () => {
          return Function;
        },
      },
      // 取消按钮自定义事件
      handleCancel: {
        require: false,
        type: Function,
      },
    },
    data() {
      return {
        scrollTop: 0,
        bottomWidth:"100%",
      };
    },
    computed: {
      ...mapGetters(["sidebar"]),
      isCollapse() {
        return !this.sidebar.opened;
      }
    },
    mounted() {
      this.$nextTick(() => {
        const container = document.querySelector(".k_layout_content");
        if(!container || !container.scrollTop) return false;
        container.scrollTop = 0;
        this.scrollTop = container.clientHeight - this.defaultHeight - 10;
        // 监听窗口变化
        window.addEventListener("resize", this.resetResize, true);
        // 监听页面滚动事件
        container.addEventListener("scroll", this.scroll, true);
        console.log(this.scrollTop, "初始化scroll");
      });
    },
    methods: {
      resetResize() {
        const container = document.querySelector(".k_layout_content");
        container.scrollTop = 0;
        this.scrollTop = container.offsetHeight - this.defaultHeight - 10;
        console.log(
            container.offsetHeight,
            container.scrollHeight,
            container.clientHeight,
            container.getBoundingClientRect(),
            "监听窗口变化"
        );
      },
      // 获取页面滚动距离
      scroll(e) {
        // const ISMICRONEV = window.__POWERED_BY_QIANKUN__
        // const mainAppName = window.__MAIN_APP_NAME__
        let className = "k_layout_content";
        // 非目标元素禁止
        if (!e.target.className.includes(className)) {
          // console.log('非目标元素禁止')
          return false;
        }
        let scrollTop = e.target.scrollTop;
        let clientHeight = e.target.clientHeight;
        // let scrollHeight = e.target.scrollHeight
        if (+scrollTop === 0) {
          this.scrollTop = clientHeight - this.defaultHeight - 10;
        } else {
          this.scrollTop = scrollTop + clientHeight - this.defaultHeight - 10;
        }
        // console.log(scrollTop, clientHeight, scrollHeight, '滚动距离')
      },
      goback(handleCancel) {
        if (handleCancel && typeof handleCancel === "function") {
          handleCancel();
        } else {
          this.$router.back({ inTagView: true });
        }
      },

      // 确定
      submitForm(){
        this.$emit("submitForm");
      },

      // 取消
      cancel(){
        this.$emit("cancel");
      },
    },

    // 销毁监听事件
    destroyed() {
      this.$nextTick(() => {
        // const container = document.querySelector('.main-container-scroll')
        // const ISMICRONEV = window.__POWERED_BY_QIANKUN__
        // const mainAppName = window.__MAIN_APP_NAME__
        let container = document.querySelector(".k_layout_content");
        this.scrollTop = 0; 
        if(!container || !container.scrollTop) return false;
        container.scrollTop = 0;
        container.removeEventListener("scroll", this.scroll, true);
        window.removeEventListener("resize", this.resetResize, true);
      });
    },
  };
</script>

<style scoped>
  /* 详情页底部保存按钮 */
  .app-container-bottom-container {
    height:50px;
    line-height:50px;
    position: fixed;
    right:0;
    bottom: 0px;
    z-index: 1001;
    text-align:center;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #f1f1f1;
  }
</style>